<template>
  <div style="padding:10px 20px;">

    <van-button
      v-if="coupon.discount_amount==0"
      round
      type="danger"
      @click="getCoupon"
      block="true"
    >{{btn_text}}</van-button>
    <div
      v-else
      style="text-align:center;color:#EABC2A;margin-top:10px;"
    >
      恭喜您领取到{{coupon.discount_amount/100}}元优惠券
      <div @click="openCoupon">
        点击<span style="color:white">查看</span>
      </div>
    </div>
    <div class='box'>
      <div class="line" />
      <div class="text">
        看朋友们手气如何
      </div>
    </div>
    <div
      v-for="v in coupons"
      style="overflow:hidden"
    >
      <div style="float:left;">
        <img
          :src="v.user.avatar_url"
          style="width:40px;height:40px;"
        />
      </div>
      <div style="color:#EABC2A;float:left;">
        <div class="div1">{{v.user.name}}</div>
        <span style="color:#fff;font-size:12px;">{{v.coupon.created}}</span>
      </div>
      <div style="color:#EABC2A;float:right;">
        {{v.coupon.discount_amount/100}}元
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
import api from "@/utils/api";
import { formatTimeV1 } from "@/utils/index";
export default {
  data() {
    return {
      card_no: "",
      password: "",
      btn_disabled: false,
      btn_text: "领取优惠券",
      coupons: [],
      order_id: 0,
      coupon: {
        discount_amount: 0
      },
      is_show:false,
    };
  },
  computed: {
    ...mapGetters(["login_info", "user"])
  },
  onLoad(param) {
    console.log("share_coupon param", param);
    if (param && param.order_id) {
      this.order_id = param.order_id;
    }
  },
  onUnload() {
    this.coupons = [];
    this.coupon = {
      discount_amount: 0
    };
  },
  beforeMount() {
    wx.getSetting({
      success(res) {
        if (!res.authSetting["scope.userInfo"]) {
          wx.navigateTo({
            url: "get_user_info?callback_url=share_coupon"
          });
          return;
        }
      }
    });
  },
  mounted() {
    this.fetchCoupons();
  },
  onShareAppMessage(res) {
    return {
      title: "分享红包",
      path: "/pages/user/share_coupon?order_id=" + this.order_id,
      imageUrl:'../../static/assets/red_package.jpg'
    };
  },
  methods: {
    openCoupon() {
      wx.navigateTo({
        url: "coupons"
      });
    },
    nameFormatter(name) {
      if (name.length < 5) {
        return name;
      }
      let s = name.substring(0, 4) + "...";
      return s;
    },
    fetchCoupons() {
      let self = this;
      self.coupons=[]
      console.log("share_coupon user", self.user);
      api
        .findCouponShareByOrderId({
          order_id: self.order_id
        })
        .then(res => {
          if (res.code == 0) {
            res.data.forEach(v => {
              if (v.user.id == self.user.id) {
                self.coupon = v.coupon;
              }
              // v.user.name = self.nameFormatter(v.user.name);
              v.coupon.created = formatTimeV1(v.coupon.created_at);
              self.coupons.push(v);
            });
            self.coupons = JSON.parse(JSON.stringify(self.coupons));
          }
        });
    },
    getCoupon() {
      let self = this;
      if (this.coupon.discount_amount > 0) {
        return;
      }
      api
        .giftShare({
          order_id: self.order_id,
          user_id: self.user.id
        })
        .then(res => {
          if (res.code == 0) {
            self.fetchCoupons();
          } else {
            wx.showToast({ title: res.msg, icon: "none" });
          }
        });
    }
  }
};
</script>

<style >
page {
  background: red;
}

.leftpart {
  float: left;
  width: 200px;

  background-color: lightgreen;
}

.rightpart {
  float: right;
  width: 100%;
  height: 200px;
  background-color: lightseagreen;
}

.box {
  margin: 10px 0px;
  width: 100%;
  position: relative;
  /* border:1px solid blue; */
  /* box-sizing: border-box; */
}

.line {
  width: 100%;
  border-top: 1px solid #fff;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: -1;
}

.text {
  width: 35%;
  text-align: center;
  margin: auto;
  /* border: 1px solid blue; */
  padding: 0 2px;
  color: #f1f1f1;
  background-color: red;
  font-size: 14px;
}

.btn {
  border: 1px solid #fff;
  border-radius: 10px;
  text-align: center;
  font-size: 15px;
  padding: 5px 0px;
  margin-bottom: 10px;
}

.btn_share {
  width: 100%;
  padding: 10px;
}

.div1 {
  width: 50px;
  word-break: keep-all; /* 不换行 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与一起overflow一起使用。*/
  overflow: hidden;
  float: left;
  padding: 0px 10px;
}
</style>
